//每天任务未完成,每天接收任务,每天派发未完成,每天派发
(function () {
    $.ajax({
        type: "get",
        url: "http://127.0.0.1:5500/dataJS/condition.json",
        success: function (data) {
            var days = [];//日期
            var data0 = [];//每天任务未完成
            var data1 = [];//每天接收任务
            var data2 = [];//每天派发未完成
            var data3 = [];//每天派发
            var x0 = 0;//每天任务未完成总数
            var x1 = 0;//每天接收任务总数
            var x2 = 0;//每天派发未完成总数
            var x3 = 0;//每天派发总数
            for (var i = 0; i < data.length; i++) {

                switch (i) {
                    case 0:
                        for (var key in data[i]) {
                            days.push(key),
                                data0.push(data[i][key]);
                            x0 += data[i][key];
                        }
                        break;
                    case 1:
                        for (var key in data[i]) {
                            data1.push(data[i][key]);
                            x1 += data[i][key];
                        }
                        break;
                    case 2:
                        for (var key in data[i]) {
                            data2.push(data[i][key]);
                            x2 += data[i][key];
                        }
                        break;
                    case 3:
                        for (var key in data[i]) {
                            data3.push(data[i][key]);
                            x3 += data[i][key];
                        }
                        break;
                }

            }
            var mychart = echarts.init(document.querySelector('#c8'));
            var option = {
                grid: {
                    left: 30,
                    top: 20,
                    right: 30,
                    bottom: 20
                },
                legend: {
                    data: [{
                        name: '任务未完成: '+x0,
                        icon: 'circle',// 强制设置图形为圆
                        textStyle: { // 设置颜色
                            color: 'red'
                        },
                       
                    },
                    {
                        name: '每天接收任务',
                        icon: 'circle',// 强制设置图形为圆
                        textStyle: { // 设置颜色
                            color: '#02a6b5'
                        }
                    },
                    ],
                    left: 20
                },

                xAxis: [
                    {
                        type: 'category',
                        data: days,

                    },
                    {
                        type: 'category',
                        data: days,
                        axisLine: {
                            show: false
                        },
                        axisLabel: {
                            show: false
                        }
                    },
                ],
                yAxis: [
                    {
                        type: 'value',
                        splitLine: {
                            show: false
                        },
                        axisLabel: {
                            show: false
                          }
                    },
                    {
                        type: 'value',
                        splitLine: {
                            show: false
                        },
                    },

                ],
                series: [
                    {
                        name: '任务未完成: '+x0,
                        type: 'bar',
                        data: data0,
                        itemStyle: {
                            normal: {
                                barBorderRadius: 20,//柱子的圆角
                                color: 'red',
                            }
                        },
                        barCategoryGap: 50,//柱子间的距离
                        barWidth: 10,//柱子的宽度
                        label: {
                            show: true,
                            color: 'yellow',
                            fontWeight: 700,
                            position: 'left',
                        },
                        xAxisIndex: 0,
                    },
                    {
                        name: '每天接收任务',
                        type: 'bar',
                        data: data1,
                        itemStyle: {
                            color: 'none',
                            borderColor: '#00c1de',
                            borderWidth: 3,
                            barBorderRadius: 15,
                        },
                        barCategoryGap: 50,//柱子间的距离
                        barWidth: 15,//柱子的宽度
                        label: {
                            show: true,
                            color: '#fff',
                            position: 'top',
                        },
                        xAxisIndex: 1,
                    },
                ]
            };
            mychart.setOption(option);
            window.addEventListener('resize', function () {
                mychart.resize();
            })
            var mychart = echarts.init(document.querySelector('#c9'));
            var option = {
                grid: {
                    left: 30,
                    top: 20,
                    right: 30,
                    bottom: 20
                },
                legend: {
                    data: [{
                        name: '派发未完成: '+x2,
                        icon: 'circle',// 强制设置图形为圆
                        textStyle: { // 设置颜色
                            color: 'red'
                        }
                    },
                    {
                        name: '每天派发',
                        icon: 'circle',// 强制设置图形为圆
                        textStyle: { // 设置颜色
                            color: '#02a6b5'
                        }
                    },
                    ],
                    left: 20
                },

                xAxis: [
                    {
                        type: 'category',
                        data: days,
                    },
                    {
                        type: 'category',
                        data: days,
                        axisLine: {
                            show: false
                        },
                        axisLabel: {
                            show: false
                        }
                    },
                ],
                yAxis: [
                    {
                        type: 'value',
                        splitLine: {
                            show: false
                        },
                        axisLabel: {
                            show: false
                          }
                    },
                    {
                        type: 'value',
                        splitLine: {
                            show: false
                        },
                    },

                ],
                series: [
                    {
                        name: '派发未完成: '+x2,
                        type: 'bar',
                        data: data2,
                        itemStyle: {
                            normal: {
                                barBorderRadius: 20,//柱子的圆角
                                color: 'red',
                            }
                        },
                        barCategoryGap: 50,//柱子间的距离
                        barWidth: 10,//柱子的宽度
                        label: {
                            show: true,
                            color: 'yellow',
                            fontWeight: 700,
                            position: 'left',
                        },
                        xAxisIndex: 0,
                    },
                    {
                        name: '每天派发',
                        type: 'bar',
                        data: data3,
                        itemStyle: {
                            color: 'none',
                            borderColor: '#00c1de',
                            borderWidth: 3,
                            barBorderRadius: 15,
                        },
                        barCategoryGap: 50,//柱子间的距离
                        barWidth: 15,//柱子的宽度
                        label: {
                            show: true,
                            color: '#fff',
                            position: 'top',
                        },
                        xAxisIndex: 1,
                    },
                ]
            };
            mychart.setOption(option);
            window.addEventListener('resize', function () {
                mychart.resize();
            })
        }
    });

})();

//未完成状态分布
(function(){
    $.ajax({
      type:"get",
      url:"http://127.0.0.1:5500/dataJS/chartw.json",
      success:function(data){
        var days = [];//日期
        var data0 = [];//待齐套
        var data1 = [];//待签单
        var data2 = [];//待包装
        var data3 = [];//待出箱单
        var data4 = [];//待通知
        var x0=0;//待齐套总数
        var x1=0;//待签单总数
        var x2=0;//待包装总数
        var x3=0;//待出箱单总数
        var x4=0;//待通知总数
        for (var i = 0; i < data.length; i++) {

            switch (i) {
                case 0:
                    for (var key in data[i]) {
                        days.push(key),
                        data0.push(data[i][key]);
                        x0+=data[i][key];
                    }
                    break;
                case 1:
                    for (var key in data[i]) {
                        data1.push(data[i][key]);
                        x1+=data[i][key];
                    }
                    break;
                case 2:
                    for (var key in data[i]) {
                        data2.push(data[i][key]);
                        x2+=data[i][key];
                    }
                    break;
                case 3:
                    for (var key in data[i]) {
                        data3.push(data[i][key]);
                        x3+=data[i][key];
                    }
                    break;
                case 4:
                    for (var key in data[i]) {
                        data4.push(data[i][key]);
                        x4+=data[i][key];
                    }
                    break;
            }

        }
        //待齐套
      var mychart0=echarts.init(document.querySelector('#c10'));
     var option0 = {
      grid:{
        left: 10,
        top: 30,
        right: 150,
        bottom: 10
      },
      legend: {
        data: ["待齐套"],
        right: 10,
        top: '50%',
        formatter: function(arg){
          return arg+x0;
        },
        textStyle: {
          color: "#02a6b5"
        }
      },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: days,
          axisLine:{
            show: false
          },
          axisLabel: {
            show: false
          },
          axisTick: {
            show: false//坐标轴刻度
          }
        },
        yAxis: {
          type: 'value',
          splitLine: {
            show: false
          },
          axisLine:{
            show: false
          },
          axisLabel: {
            show: false
          }
        },
        series: [
          {
            name: '待齐套',
            type: 'line',
            data: data0,
            label: {
              show: true,
              polition: 'top',
              color: '#02a6b5',
              formatter: function(params) {
                if (params.value > 0) {
                 return params.value;
                } else {
                 return ' ';
                }
             },
            },
            labelLine: {
              smooth: true
            },
            lineStyle: {
              color: '#02a6b5'
            }
          },
        ]
      };
      mychart0.setOption(option0);
      window.addEventListener('resize', function () {
        mychart0.resize();
    })
      //待签单
      var mychart1=echarts.init(document.querySelector('#c11'));
     var option1 = {
      grid:{
        left: 10,
        top: 30,
        right: 150,
        bottom: 10
      },
      legend: {
        data: ["待签单"],
        right: 10,
        top: '50%',
        formatter: function(arg){
          return arg+x1;
        },
        textStyle: {
          color: "#ffeb7b"
        }
      },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: days,
          axisLine:{
            show: false
          },
          axisLabel: {
            show: false
          },
          axisTick: {
            show: false//坐标轴刻度
          }
        },
        yAxis: {
          type: 'value',
          splitLine: {
            show: false
          },
          axisLine:{
            show: false
          },
          axisLabel: {
            show: false
          }
        },
        series: [
          {
            name: '待签单',
            type: 'line',
            data: data1,
            label: {
              show: true,
              polition: 'top',
              color: '#ffeb7b',
              formatter: function(params) {
                if (params.value > 0) {
                 return params.value;
                } else {
                 return ' ';
                }
             },
            },
            labelLine: {
              smooth: true
            },
            lineStyle: {
              color: '#ffeb7b'
            }
          },
        ]
      };
      mychart1.setOption(option1);
      window.addEventListener('resize', function () {
        mychart1.resize();
    })
      //待包装
      var mychart2=echarts.init(document.querySelector('#c12'));
     var option2 = {
      grid:{
        left: 10,
        top: 30,
        right: 150,
        bottom: 10
      },
      legend: {
        data: ["待包装"],
        right: 10,
        top: '50%',
        formatter: function(arg){
          return arg+x2;
        },
        textStyle: {
          color: "#aaee7b"
        }
      },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: days,
          axisLine:{
            show: false
          },
          axisLabel: {
            show: false
          },
          axisTick: {
            show: false//坐标轴刻度
          }
        },
        yAxis: {
          type: 'value',
          splitLine: {
            show: false
          },
          axisLine:{
            show: false
          },
          axisLabel: {
            show: false
          }
        },
        series: [
          {
            name: '待包装',
            type: 'line',
            data: data2,
            label: {
              show: true,
              polition: 'top',
              color: '#aaee7b',
              formatter: function(params) {
                if (params.value > 0) {
                 return params.value;
                } else {
                 return ' ';
                }
             },
            },
            labelLine: {
              smooth: true
            },
            lineStyle: {
              color: '#aaee7b'
            }
          },
        ]
      };
      mychart2.setOption(option2);
      window.addEventListener('resize', function () {
        mychart2.resize();
    })
       //待出箱单
       var mychart3=echarts.init(document.querySelector('#c13'));
       var option3 = {
        grid:{
          left: 10,
          top: 30,
          right: 150,
          bottom: 10
        },
        legend: {
          data: ["待出箱单"],
          right: 10,
          top: '50%',
          formatter: function(arg){
            return arg+x3;
          },
          textStyle: {
            color: "#bf4e1f"
          }
        },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: days,
            axisLine:{
              show: false
            },
            axisLabel: {
              show: false
            },
            axisTick: {
              show: false//坐标轴刻度
            }
          },
          yAxis: {
            type: 'value',
            splitLine: {
              show: false
            },
            axisLine:{
              show: false
            },
            axisLabel: {
              show: false
            }
          },
          series: [
            {
              name: '待出箱单',
              type: 'line',
              data: data3,
              label: {
                show: true,
                polition: 'top',
                color: '#bf4e1f',
                formatter: function(params) {
                  if (params.value > 0) {
                   return params.value;
                  } else {
                   return ' ';
                  }
               },
              },
              labelLine: {
                smooth: true
              },
              lineStyle: {
                color: '#bf4e1f'
              }
            },
          ]
        };
        mychart3.setOption(option3);
        window.addEventListener('resize', function () {
          mychart3.resize();
      })
        //待通知
       var mychart4=echarts.init(document.querySelector('#c14'));
       var option4 = {
        grid:{
          left: 10,
          top: 30,
          right: 150,
          bottom: 30
        },
        legend: {
          data: ["待通知"],
          right: 10,
          top: '50%',
          formatter: function(arg){
            return arg+x4;
          },
          textStyle: {
            color: "#5470C6"
          }
        },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: days,
            axisLine:{
              show: true
            },
            axisLabel: {
              show: true
            },
            axisTick: {
              show: false//坐标轴刻度
            }
          },
          yAxis: {
            type: 'value',
            splitLine: {
              show: false
            },
            axisLine:{
              show: false
            },
            axisLabel: {
              show: false
            }
          },
          series: [
            {
              name: '待通知',
              type: 'line',
              data: data4,
              label: {
                show: true,
                polition: 'top',
                color: '#5470C6',
                formatter: function(params) {
                  if (params.value > 0) {
                   return params.value;
                  } else {
                   return ' ';
                  }
               },
              },
              labelLine: {
                smooth: true
              },
              lineStyle: {
                color: '#5470C6'
              }
            },
          ]
        };
        mychart4.setOption(option4);
        window.addEventListener('resize', function () {
          mychart4.resize();
      })
    },
  }); 
  })();

  //仪表盘
  (function(){
    var mychart=echarts.init(document.querySelector('#c16'));
    var option = {
      series: [
        {
          type: 'gauge',
          axisLine: {
            lineStyle: {
              width: 30,
              color: [
                [0.3, '#67e0e3'],
                [0.7, '#37a2da'],
                [1, '#fd666d']
              ]
            }
          },
          pointer: {
            itemStyle: {
              color: 'auto'
            }
          },
          axisTick: {
            distance: -30,
            length: 8,
            lineStyle: {
              color: '#fff',
              width: 2
            }
          },
          splitLine: {
            distance: -30,
            length: 30,
            lineStyle: {
              color: '#fff',
              width: 4
            }
          },
          axisLabel: {
            color: 'auto',
            distance: 40,
            fontSize: 10
          },
          detail: {
            valueAnimation: true,
            formatter: '{value} /h',
            color: 'auto'
          },
          data: [
            {
              name: '总收敛周期',
              value: 32,
            }
          ],
          min: 0, // min max 控制仪表盘数值范围
          max: 50 
        }
      ]
    };
    mychart.setOption(option);
        window.addEventListener('resize', function () {
          mychart.resize();
        })
  })();

  //圆环
  //1
  (function(){
    var mychart=echarts.init(document.querySelector('#c15-01'));
    var option = {
      legend: {
        top: '5%',
        left: 'center'
      },
      series: [
        {
          name: 'Access From',
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          label: {
            show: true,
            position: 'center',
            fomatter: '{d}',
            color: '#fff'
          },
          labelLine: {
            show: false
          },
          data: [
            { value: 1048,name:25},
          ],
          itemStyle: {
            //柱子颜色渐变:1,指明颜色渐变的方向,2,指明不同百分比之下颜色的值
            color: new echarts.graphic.LinearGradient(0,0,0,1,[
              {
                offset: 0,
                color: '#4052EE'//百分之0状态之下的颜色值
              },
              {
                offset: 1,
                color: '#fc6EE5'//百分之100状态之下的颜色值
              }
            ]),
            borderRadius: [15, 15, 0, 0] //柱子圆角设置（顺时针左上，右上，右下，左下）
          }
        }
      ]
    };
    mychart.setOption(option);
        window.addEventListener('resize', function () {
          mychart.resize();
        })
  })();
//2
  (function(){
    var mychart=echarts.init(document.querySelector('#c15-02'));
    var option = {
      color: 'red',
      legend: {
        top: '5%',
        left: 'center'
      },
      series: [
        {
          name: 'Access From',
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: 'center'
          },
          labelLine: {
            show: false
          },
          data: [
            { value: 1048, name: 'Search Engine' },
          ],
          itemStyle: {
            //柱子颜色渐变:1,指明颜色渐变的方向,2,指明不同百分比之下颜色的值
            color: new echarts.graphic.LinearGradient(0,0,0,1,[
              {
                offset: 0,
                color: '#5dc2fe'//百分之0状态之下的颜色值
              },
              {
                offset: 1,
                color: '#ffeb7b'//百分之100状态之下的颜色值
              }
            ]),
            borderRadius: [15, 15, 0, 0] //柱子圆角设置（顺时针左上，右上，右下，左下）
          }
        }
      ]
    };
    mychart.setOption(option);
        window.addEventListener('resize', function () {
          mychart.resize();
        })
  })();
//3
  (function(){
    var mychart=echarts.init(document.querySelector('#c15-03'));
    var option = {
      color: 'yellow',
      legend: {
        top: '5%',
        left: 'center'
      },
      series: [
        {
          name: 'Access From',
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: 'center'
          },
          labelLine: {
            show: false
          },
          data: [
            { value: 1048, name: 'Search Engine' },
          ],
          itemStyle: {
            //柱子颜色渐变:1,指明颜色渐变的方向,2,指明不同百分比之下颜色的值
            color: new echarts.graphic.LinearGradient(0,0,0,1,[
              {
                offset: 0,
                color: '#5dc2fe'//百分之0状态之下的颜色值
              },
              {
                offset: 1,
                color: '#02a6b5'//百分之100状态之下的颜色值
              }
            ]),
            borderRadius: [15, 15, 0, 0] //柱子圆角设置（顺时针左上，右上，右下，左下）
          }
        }
      ]
    };
    mychart.setOption(option);
        window.addEventListener('resize', function () {
          mychart.resize();
        })
  })();
//4 水球图
  (function(){
    var mychart=echarts.init(document.querySelector('#c15-05'));
    var option={
      series: {
        type: 'liquidFill',
        name: 'Liquid Fill',
        radius: '80%',
        data: [{
          name: 'First Data',
          value: 0.6,
        },0.5,0.4,0.3],
        label: {
          normal: {
            formatter: '{c}',
            textStyle: {
              fontSize: 28
            }
          }
        }
      }
  };
    mychart.setOption(option);
        window.addEventListener('resize', function () {
          mychart.resize();
        })
  })();
//5 水球图
  (function(){
    var mychart=echarts.init(document.querySelector('#c15-06'));
    var option = {
      series: [{
        type: 'liquidFill',
        radius: '80%',
        data: [0.5,0.45,0.4,0.3],
        label: {
          textStyle: {
            color: 'red',
            insideColor: 'yellow',
            fontSize: 50
          }
        }
      }]
    };
    mychart.setOption(option);
        window.addEventListener('resize', function () {
          mychart.resize();
        })
  })();

  //C1图表每天包装，每天出箱单
  (function(){
    $.ajax({
      type:"get",
      url:"http://127.0.0.1:5500/dataJS/bar.json",
      success:function(data){
        var keys = [];
          var values = [];
          for (var i = 0; i < data.length; i++) {
              keys.push(data[i].MTimeS);
              values.push(data[i].Avgh);
          }
      var mychart=echarts.init(document.querySelector('#c1'));
      var option = {
        legend: {
          data: ['每天包装','每天出箱单'],
          textStyle: {
            color: 'auto'
          }
        },
        grid:{
          left: 30,
          top: 30,
          right: 10,
          bottom: 30
        },
          xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          },
          yAxis: {
            type: 'value',
            splitLine: {
              show: true,//是否显示分隔线。默认数值轴显示，类目轴不显示
              lineStyle: {
                color: 'rgba(255,255,255,.1)',//分隔线颜色，可以设置成单个颜色。也可以设置成颜色数组，分隔线会按数组中颜色的顺序依次循环设置颜色
                width: 1,//分隔线线宽
                type: 'solid',//分隔线的类型可选：'solid', 'dashed','dotted'
              }
            }
          },
          series: [
            {
              name:'每天包装',
              data: [120, 200, 150, 80, 70, 110, 130],
              type: 'bar',
              label:{
                show: true,
                position: 'top',
                color: '#fff',
                fontStyle: 'normal',//字体风格,可选：'normal','italic''oblique'
                fontWeight: 'normal',//文字字体的粗细,可选：'normal','bold','bolder','lighter'或用数字100 | 200 | 300 | 400...
                fontFamily:'sans-serif',//文字的字体系列。还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...
                fontSize: 12,//文字的字体大小
              },
              barWidth: 30,
              itemStyle: {
                //柱子颜色渐变:1,指明颜色渐变的方向,2,指明不同百分比之下颜色的值
                color: new echarts.graphic.LinearGradient(0,0,0,1,[
                  {
                    offset: 0,
                    color: '#5052EE'//百分之0状态之下的颜色值
                  },
                  {
                    offset: 1,
                    color: '#AB6EE5'//百分之100状态之下的颜色值
                  }
                ]),
                borderRadius: [15, 15, 0, 0] //柱子圆角设置（顺时针左上，右上，右下，左下）
              }
            },
            {
              name:'每天出箱单',
              data: [180, 150, 80, 60, 30, 90, 120],
              type: 'line',
              label:{
                show: true,
                position: 'top',
                color: 'red',
                fontStyle: 'normal',//字体风格,可选：'normal','italic''oblique'
                fontWeight: 'normal',//文字字体的粗细,可选：'normal','bold','bolder','lighter'或用数字100 | 200 | 300 | 400...
                fontFamily:'sans-serif',//文字的字体系列。还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...
                fontSize: 12,//文字的字体大小
              },
              barWidth: 30,
              itemStyle: {
                //柱子颜色渐变:1,指明颜色渐变的方向,2,指明不同百分比之下颜色的值
                color: new echarts.graphic.LinearGradient(0,0,0,1,[
                  {
                    offset: 0,
                    color: '#02a6b5'//百分之0状态之下的颜色值
                  },
                  {
                    offset: 1,
                    color: '#ffeb7b'//百分之100状态之下的颜色值
                  }
                ]),
                borderRadius: [15, 15, 0, 0] //柱子圆角设置（顺时针左上，右上，右下，左下）
              }
            }
          ]
        };
      mychart.setOption(option);
      window.addEventListener('resize', function () {
        mychart.resize();
    })
      }
  });
      
  })();

  //C2图表 合同完成周期比
  (function(){
    $.ajax({
      type:"get",
      url:"http://127.0.0.1:5500/dataJS/bar.json",
      success:function(data){
        var keys = [];
          var values = [];
          for (var i = 0; i < data.length; i++) {
              keys.push(data[i].MTimeS);
              values.push(data[i].Avgh);
          }
      var mychart=echarts.init(document.querySelector('#c2'));
      var option = {
        title: {
          text: '合同完成周期比',
          right: 20,
          top: 5
        },

        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c}%'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          data: ['1天内', '1-1.5天', '1.5天以上'],
          textStyle: {
            color: 'auto'
          }
        },
        series: [
          {
            name: '按接收任务时间',
            type: 'funnel',
            width: '80%',
            height: '45%',
            left: '8%',
            top: '50%',
            data: [
              { value: 60, name: '1天内' },
              { value: 30, name: '1-1.5天' },
              { value: 10, name: '1.5天以上' },
            ],
             label: {
              show: true,
              color: '#FFF',
              position: 'inside',
              formatter: '{c}%'
            },
          },
          {
            name: '派发时间',
            type: 'funnel',
            width: '80%',
            height: '45%',
            left: '8%',
            top: '5%',
            sort: 'ascending',
            data: [
               { value: 60, name: '1天内' },
              { value: 30, name: '1-1.5天' },
              { value: 10, name: '1.5天以上' },
            ],
            label: {
              show: true,
              color: '#FFF',
              position: 'inside',
              formatter: '{c}%'
            },
          },
        ]
      };
      mychart.setOption(option);
      window.addEventListener('resize', function () {
        mychart.resize();
    })
      }
  });
      
  })();
